<template>
    <view class="edit_card">
        <!-- 固定内容 -->
        <view class="form">
            <u-form
                labelPosition="left"
                :model="cardFormList"
                :labelStyle="labelStyle"
                labelWidth="160rpx"
            >
                <u-form-item
                    label="提交人"
                    :customStyle="formItemCustomStyle"
                    borderBottom
                >
                    <u-text
                        align="right"
                        size="28rpx;"
                        bold
                        color="#C4C4C4;"
                        :text="cardFormList.salesmanName"
                    />
                </u-form-item>
                <u-form-item label="职务" :customStyle="formItemCustomStyle">
                    <u-text
                        align="right"
                        size="28rpx;"
                        bold
                        color="#C4C4C4;"
                        :text="cardFormList.postName"
                    />
                </u-form-item>
            </u-form>
        </view>
        <u-gap height="14rpx" bgColor="#F5F5F5" />
        <!-- 编辑内容 -->
        <view class="edit_info">
            <view class="photo">
                <view>头像</view>
                <view class="photo_r" @click="tapUpdateImg">
                    <image
                        class="photo_img"
                        :src="cardFormList.avatar"
                        mode=""
                    ></image>
                    <u-icon name="arrow-right" color="#666" size="20"></u-icon>
                </view>
            </view>
            <!-- 编辑手机号 -->
            <view class="tel">
                <view>名片手机</view>
                <view class="photo_r">
                    <text>{{ cardFormList.contactPhone }}</text>
                    <u-icon
                        name="arrow-right"
                        color="#666"
                        size="20"
                        @click="open_tel"
                    ></u-icon>
                </view>
            </view>
            <u-popup :show="tel_show" mode="center">
                <view
                    style="width: 320px; border-radius: 16rpx; padding: 0 36rpx"
                >
                    <u-form
                        ref="cardFormList"
                        labelPosition="left"
                        :model="cardFormList"
                        labelWidth="180rpx"
                    >
                        <u-form-item
                            label="新手机号:"
                            borderBottom
                            prop="contactPhone"
                        >
                            <u-input
                                inputAlign="right"
                                fontSize="28rpx"
                                clearable
                                placeholderClass="placeHolder"
                                :customStyle="customInputStyle"
                                v-model="cardFormList.contactPhone"
                            />
                            <u-text
                                @click="getPhoneSendMsm"
                                size="28rpx"
                                color="#588BF3"
                                text="获取验证码"
                                align="right"
                            />
                        </u-form-item>
                        <u-form-item
                            label="输入验证码:"
                            borderBottom
                            prop="checkCode"
                        >
                            <u-input
                                inputAlign="right"
                                fontSize="28rpx"
                                clearable
                                placeholderClass="placeHolder"
                                :customStyle="customInputStyle"
                                v-model="cardFormList.checkCode"
                            />
                        </u-form-item>
                        <u-gap height="80rpx" />
                        <u-icon
                            name="info-circle-fill"
                            color="#10AEFF"
                            size="28rpx"
                            label="仅修改名片，账号修改请联系管理"
                            labelColor="#999"
                            labelSize="26rpx"
                        />
                        <u-gap height="22rpx" />
                    </u-form>
                </view>
                <view class="flex_wrap email_btn">
                    <u-text
                        @click="tel_close"
                        text="取消"
                        align="center"
                        size="34rpx"
                    />
                    <u-line
                        direction="col"
                        length="112rpx"
                        color="#999"
                    ></u-line>
                    <u-text
                        text="确定"
                        align="center"
                        color="#588BF3 "
                        size="34rpx"
                        @click="submitPhone"
                    />
                </view>
            </u-popup>
            <!-- 编辑邮箱 -->
            <view class="tel">
                <view>邮箱</view>
                <view class="photo_r">
                    <text>{{ cardFormList.email }}</text>
                    <u-icon
                        name="arrow-right"
                        color="#666"
                        size="20"
                        @click="open_email"
                    ></u-icon>
                </view>
            </view>
            <u-popup :show="email_show" mode="center">
                <view style="width: 320px; border-radius: 16rpx">
                    <u-gap height="64rpx" />
                    <u-text text="邮箱" align="center" />
                    <u-gap height="32rpx" />
                    <view class="email_input">
                        <u-input
                            placeholder="请输入内容"
                            border="surround"
                            v-model="cardFormList.email"
                            clearable
                        />
                    </view>
                    <u-gap height="32rpx" />
                    <view class="flex_wrap email_btn">
                        <u-text
                            @click="close"
                            text="取消"
                            align="center"
                            size="34rpx"
                        />
                        <u-line
                            direction="col"
                            length="112rpx"
                            color="#faf"
                        ></u-line>
                        <u-text
                            text="确定"
                            align="center"
                            color="#588BF3 "
                            size="34rpx"
                            @click="submitEmail"
                        />
                    </view>
                </view>
            </u-popup>
            <!-- 编辑微信二维码 -->
            <view class="tel" @click="toUploadCode">
                <view>上传微信二维码</view>
                <view class="photo_r">
                    <u-icon
                        name="/static/img/card/wx_code.png"
                        color="#666"
                        size="20"
                    />
                    <u-icon name="arrow-right" color="#666" size="20" />
                </view>
            </view>
            <!-- 编辑个人简历 -->
            <view class="tel">
                <view>个人简历</view>
                <view class="photo_r">
                    <u-icon
                        name="arrow-right"
                        color="#666"
                        size="20"
                        @click="open_resume"
                    />
                </view>
            </view>
            <view class="resume">{{ cardFormList.resume }}</view>
        </view>
        <u-popup :show="resume_show" @close="close_resume" mode="center">
            <view style="width: 320px; border-radius: 16rpx">
                <u-gap height="64rpx" />
                <u-text
                    text="个人简介"
                    color="#000"
                    size="34rpx"
                    align="center"
                />
                <u-gap height="64rpx" />
                <view class="" style="padding: 0 48rpx">
                    <textarea
                        v-model="cardFormList.resume"
                        style="
                            background-color: #ededed;
                            color: #666;
                            padding: 14rpx 32rpx;
                            width: 480rpx;
                        "
                    ></textarea>
                </view>
                <u-gap height="64rpx" />
                <view class="email_btn" @click="submitResume">
                    <u-text
                        text="确定"
                        align="center"
                        color="#588BF3 "
                        size="34rpx"
                        lineHeight="112rpx"
                    />
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    businessCard,
    editEmail,
    editResume,
    editPhoneSendMsm,
    editPhone,
    editAvatar,
} from "@/api/card";
export default {
    data() {
        return {
            labelStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            formItemCustomStyle: {
                padding: "32rpx 0",
            },
            cardFormList: {
                contactPhone: "",
                checkCode: "",
            },
            email_show: false, //更改邮箱弹框
            tel_show: false, //更改手机号弹框
            resume_show: false, //更改个人简历弹框
            cardFormListRules: {
                contactPhone: [
                    {
                        type: "string",
                        required: true,
                        message: "请填写账号",
                        trigger: ["blur", "change"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        message: "手机号格式不正确",
                        trigger: ["blur"],
                    },
                ],
                checkCode: {
                    type: "string",
                    required: true,
                    len: 6,
                    message: "请填写6位验证码",
                    trigger: ["blur"],
                },
            },
        };
    },
    onLoad() {
        this.getBusinessCard();
    },
    onReady() {
        this.$refs.cardFormList.setRules(this.cardFormListRules);
    },
    methods: {
        async getBusinessCard() {
            const res = await businessCard();
            this.cardFormList = res.data;
        },
        tapUpdateImg() {
            uni.chooseImage({
                // 从本地相册选择图片或使用相机拍照。
                count: 1, //默认选择1张图片
                sizeType: ["original", "compressed"], //original 原图，compressed 压缩图，默认二者都有
                success: (res) => {
                    this.cardFormList.avatar = res.tempFilePaths[0]; //更新本低浏览头像图片
                    this.submitAvatar(res.tempFilePaths[0]); //上传图片
                },
            });
        },
        //上传图片
        async submitAvatar(avatar) {
            const res = await editAvatar({
                avatar: this.cardFormList.avatar,
            });
            if (res.code === 200) {
                this.getBusinessCard();
                uni.$u.toast("头像修改成功");
            }
        },
        open_email() {
            this.email_show = true;
        },
        close() {
            this.email_show = false;
        },
        async submitEmail() {
            const res = await editEmail({
                email: this.cardFormList.email,
            });
            if (res.code === 200) {
                this.email_show = false;
            }
        },
        open_tel() {
            this.tel_show = true;
        },
        tel_close() {
            this.tel_show = false;
        },
        async getPhoneSendMsm() {
            //发送验证码
            const res = await editPhoneSendMsm({
                contactPhone: this.cardFormList.contactPhone,
            });
        },
        submitPhone() {
            //点击找回密码登录
            this.$refs.cardFormList
                .validate()
                .then((res) => {
                    editPhone({
                        checkCode: this.cardFormList.checkCode,
                        contactPhone: this.cardFormList.contactPhone,
                    })
                        .then(async (res) => {
                            this.getBusinessCard();
                            this.tel_show = false;
                            uni.$u.toast("修改名片手机号成功");
                        })
                        .catch((error) => {
                            uni.$u.toast(error);
                        });
                })
                .catch((errors) => {
                    uni.$u.toast("校验失败");
                });
        },
        open_resume() {
            this.resume_show = true;
        },
        close_resume() {
            this.resume_show = false;
        },
        async submitResume() {
            const res = await editResume({
                resume: this.cardFormList.resume,
            });
            if (res.code === 200) {
                this.getBusinessCard();
                this.resume_show = false;
            } else {
                console.log(res.msg);
            }
        },
        toUploadCode() {
            uni.$u.route({
                url:
                    "pages/card_else/uploadCode/index?wechatQrCode=" +
                    this.cardFormList.wechatQrCode,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.edit_card {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    color: #333333;
}

.form {
    padding: 0 28rpx;
}

.edit_info {
    padding: 0 28rpx;
}

.photo_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}

.photo {
    height: 154rpx;
}

.tel {
    border-top: 1px solid #f3f3f3;
    height: 104rpx;
}

.photo,
.tel {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    align-items: center;
}

.photo_r {
    display: flex;
    font-weight: bold;
}

.resume {
    padding: 24rpx 20rpx;
    background: #f3f3f3;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
}

.mask {
    width: 320px;
    height: 294px;
    background: #ffffff;
    border-radius: 20rpx;
}

.tel_number {
    padding: 0 38rpx;
}

.email_btn {
    border-top: 2rpx solid rgba(0, 0, 0, 0.1);
    height: 112rpx;
}

.email_input {
    width: 544rpx;
    height: 96rpx;
    margin: 0 auto;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}
</style>
